<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HSF可视化配置，这个标题其实是没用的</title>
    <link rel="stylesheet" href="../../lib/bootstrap-3.3.1/css/bootstrap.min.css">
    <style>
        html, body, #app {
            height: 100%;
        }
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px
        }

        ::-webkit-scrollbar-track {
            border-radius: 10px;
            background-color: #d8dce5
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: #adadad
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #929292
        }

        ::-webkit-scrollbar-thumb:active {
            background-color: #666363
        }

        ::-webkit-scrollbar-corner {
            background-color: #535353
        }

        ::-webkit-scrollbar-resizer {
            background-color: #ff6e00
        }
        .page-title {
            margin-bottom: 20px;
        }

        .control-label {
            font-weight: normal;
        }

        .btn-primary {
            background-color: #1890ff;
            border-color: #1890ff;
            outline: none;
        }

        .btn-primary:focus,
        .btn-primary:hover {
            background-color: #40a9ff;
            border-color: #40a9ff;
            outline: none;
        }

        .btn-primary.active,
        .btn-primary:active {
            background-color: #096dd9;
            border-color: #096dd9;
            color: #fff;
            outline: none;
        }

        .table td {
            word-break: break-all;
        }
        .table td span {
            word-break: break-all;
        }

        .table td.hide-text {
            word-break: initial;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 300px;
        }

        .table td.hide-text.hide-service-key {
            max-width: 120px;
        }

        .dependency-list > div {
            border-bottom: dashed 1px #bdbdbd;
            margin-bottom: 8px;
            padding-bottom: 4px;
        }
        .dependency-list > div:last-child {
            border-bottom: none;
        }
        .hide-group-id {
            word-break: initial;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 150px;
        }
        .main-table-wrapper {
            overflow-y: auto;
            overflow-x: visible;
            border-top: solid 1px #e8e8e8;
            height: calc(100% - 166px);
        }
    </style>
</head>

<body>
    <div id="app" class="container-fluid">
        <h3 class="page-title">HSF可视化配置（{{projectName}}）</h3>
        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-1 control-label">应用名</label>
                <div class="col-sm-2">
                    <select v-model="params.appname" class="form-control" @change="query">
                        <option value="">--请选择--</option>
                        <option v-for="item in proxy.services" :value="item.appname">{{item.appname}}</option>
                    </select>
                </div>
                <!-- <label class="col-sm-1 control-label">groupId</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" placeholder="groupId">
                </div>
                <label class="col-sm-1 control-label">artifactId</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" placeholder="artifactId">
                </div> -->
                <label class="col-sm-1 control-label">服务名</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" v-model="params.serviceName" placeholder="请输入serviceName" @input="query">
                </div>
                <div class="col-sm-5">
                    <a href="javascript:;" class="btn btn-sm btn-primary" @click="query">查询</a>
                    <a href="javascript:;" class="btn btn-sm btn-success" @click="addService">+ 添加service</a>
                    <a href="javascript:;" class="btn btn-sm btn-danger" @click="waiting">一键问题修复</a>
                    <a href="javascript:;" class="btn btn-sm btn-default" @click="initList">刷新</a>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">环境</label>
                <div class="col-sm-5" style="width: 150px;">
                    <label class="radio-inline">
                        <input type="radio" name="env" v-model="params.env" value="daily"> 日常
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="env" v-model="params.env" value="online"> 线上
                    </label>
                </div>
                <div class="col-sm-2">
                    <label class="checkbox-inline">
                        <input type="checkbox" v-model="params.autoRunProxy"> 自动 run proxy
                    </label>
                </div>
            </div>
        </form>

        <div class="main-table-wrapper">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th style="width: 10%">应用名</th>
                        <th style="width: 8%">hsf版本</th>
                        <th style="width: 12%">依赖</th>
                        <th style="width: 20%">serviceKey</th>
                        <th style="width: 30%">serviceName</th>
                        <th style="width: 20%">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-if="!proxy.services.length">
                        <td colspan="99">
                            <div v-if="!loading" style="text-align: center">暂无数据</div>
                            <div v-else style="text-align: center; padding: 20px 0;">
                                <img src="../../images/loading.gif"/>
                            </div>
                        </td>
                    </tr>
                    <template v-else v-for="(item, i) in proxy.services">
                        <template v-for="(subitem, serviceKey, j) in item.api">
                            <tr v-if="item.show && subitem.show">
                                <td v-if="getFirstShowIdx(item)==j" :rowspan="Object.values(item.api).filter(temp => temp.show).length">
                                    <a href="javascript:;" @click="params.appname = item.appname;query();">{{item.appname}}</a></td>
                                <td v-if="getFirstShowIdx(item)==j" :rowspan="Object.values(item.api).filter(temp => temp.show).length">
                                    <span v-if="!item.edit" class="label" :class="[`label-${item.version=='1.0.0'?'success':'warning'}`]">{{item.version}}</span>
                                    <select v-else class="form-control" v-model="editItem.version">
                                        <option value="">--请选择--</option>
                                        <option v-for="version in item.hsfVersionList" :value="version.version">{{version.version}}</option>
                                    </select>
                                </td>
                                <td v-if="getFirstShowIdx(item)==j" :rowspan="Object.values(item.api).filter(temp => temp.show).length">
                                    <div class="dependency-list">
                                        <div v-for="dep in item.dependency">
                                            <div class="hide-group-id">{{dep.groupId}}</div>
                                            <div>
                                                <a href="javascript:;" @click="openJarByJdGui(dep)">
                                                    <img src="../../images/java.png" style="width: 12px;"/>
                                                    {{dep.artifactId}}-{{dep.version}}.jar
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="hide-text hide-service-key">
                                    <a href="javascript:;" v-if="!subitem.edit" @click="gotoServiceKey(item, serviceKey)" :title="serviceKey">{{serviceKey}}</a>
                                    <input v-else type="text" class="form-control" v-model="editItem.serviceKey" />
                                </td>
                                <td class="hide-text">
                                    <a href="javascript:;" @click="gotoServiceKey(item, subitem.interfaceName)" :title="subitem.interfaceName">{{subitem.interfaceName}}</a>
                                </td>
                                <td>
                                    <div class="btn-group">
                                        <template v-if="subitem.edit">
                                            <a href="javascript:;" class="btn btn-sm btn-primary" @click="submitEditService(item, item.api, serviceKey)">确定</a>
                                            <a href="javascript:;" class="btn btn-sm btn-default" @click="cancelEditService(item, subitem)">取消</a>
                                        </template>
                                        <template v-else>
                                            <a href="javascript:;" class="btn btn-sm btn-primary" @click="editService(item, subitem, serviceKey)">编辑</a>
                                            <a href="javascript:;" class="btn btn-sm btn-danger" @click="deleteService(item.api, serviceKey)">删除</a>
                                            <div class="btn-group">
                                                <a href="javascript:;" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">更多
                                                    <span class="caret"></span>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="javascript:;" @click="showDepModal(item)">依赖管理</a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" @click="showMethodModal(item, subitem)">查看方法列表</a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" @click="waiting">自动更新依赖</a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" @click="waiting">方法调试</a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" @click="waiting">一键生成API</a>
                                                    </li>
                                                    <li class="divider"></li>
                                                    <li>
                                                        <a href="javascript:;" :data-clipboard-text="subitem.interfaceName" @click="waiting">复制服务名</a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" :data-clipboard-text="subitem.interfaceName" @click="waiting">复制到其它工程</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </template>
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </template>
                </tbody>
            </table>
        </div>
        <div id="modal_add_service" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="width: 800px;">
                    <form class="form-horizontal" @submit.prevent="submitAddService">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title">添加Service</h4>
                        </div>
                        <div class="modal-body">
                            <div class="alert alert-success" role="alert">大部分情况下只需要输入服务名，其它全部自动生成，少部分情况artifactId需要手动填写。</div>
                            <div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">环境</label>
                                    <div class="col-sm-6">
                                        <label class="radio-inline">
                                            <input type="radio" name="env" v-model="addParams.env" value="daily"> 日常
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="env" v-model="addParams.env" value="online"> 线上
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">服务名</label>
                                    <div class="col-sm-6">
                                        <input type="text" ref="modal_service_name" class="form-control" v-model="addParams.serviceName" placeholder="请输入serviceName" @input="refreshServiceList"
                                            required>
                                    </div>
                                    <div class="col-sm-4">
                                        <img v-if="addParams.loading" src="../../images/loading.gif" style="width: 28px;" />
                                        <span v-else-if="addParams.errorInfo" style="color: red;">{{addParams.errorInfo}}</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">HSF版本</label>
                                    <div class="col-sm-6">
                                        <select v-model="addParams.version" class="form-control" required>
                                            <option value="">--请选择--</option>
                                            <option v-for="version in addParams.hsfVersionList" :value="version.version">{{version.version}}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">应用名</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" v-model="addParams.appname" placeholder="appname" readonly required>
                                    </div>
                                    <div class="col-sm-4">
                                        <p class="form-control-static">灰色为自动生成，无需填写</p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">分组</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" v-model="addParams.group" placeholder="group" readonly required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">artifactId</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" v-model="addParams.artifactId" placeholder="半自动生成" @input="refreshDependencyInfo"
                                            required>
                                    </div>
                                    <div class="col-sm-4">
                                        <img v-if="addParams.artLoading" src="../../images/loading.gif" style="width: 28px;" />
                                        <span v-else-if="addParams.artErrorInfo" style="color: red;">{{addParams.artErrorInfo}}</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">groupId</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" v-model="addParams.groupId" placeholder="groupId" readonly required>
                                    </div>
                                    <div class="col-sm-4">
                                        <img v-if="addParams.depLoading" src="../../images/loading.gif" style="width: 28px;" />
                                        <span v-else-if="addParams.depErrorInfo" style="color: red;">{{addParams.depErrorInfo}}</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">依赖版本</label>
                                    <div class="col-sm-6">
                                        <select v-model="addParams.dependencyVersion" class="form-control" required>
                                            <option value="">--请选择--</option>
                                            <option v-for="(value, key) in addParams.depVersionList" :value="key">{{value}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <input type="submit" class="btn btn-primary" value="确定添加" />
                            <input type="button" class="btn btn-default" data-dismiss="modal" value="取消" />
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div id="modal_dep_manage" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="width: 800px;">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">{{depAppname}}-依赖包管理</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <div class="col-sm-4">
                                    <a href="javascript:;" class="btn btn-sm btn-success" @click="waiting">添加依赖</a>
                                </div>
                            </div>
                        </form>
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>groupId</th>
                                    <th>artifactId</th>
                                    <th>version</th>
                                    <th style="width: 120px;">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-if="!depList.length">
                                    <td colspan="99">
                                        <div style="text-align: center">暂无数据</div>
                                    </td>
                                </tr>
                                <tr v-else v-for="(dep, i) in depList">
                                    <td>
                                        <template v-if="!dep.temp">{{dep.groupId}}</template>
                                        <input v-else type="text" class="form-control" v-model="dep.temp.groupId"/>
                                    </td>
                                    <td>
                                        <template v-if="!dep.temp">{{dep.artifactId}}</template>
                                        <input v-else type="text" class="form-control" v-model="dep.temp.artifactId"/>
                                    </td>
                                    <td>
                                        <template v-if="!dep.temp">{{dep.version}}</template>
                                        <select v-else class="form-control" v-model="dep.temp.version">
                                            <option value="">--请选择--</option>
                                            <option v-for="(val, key) in dep.temp.versionList" :value="key">{{val}}</option>
                                        </select>
                                    </td>
                                    <td>
                                        <template v-if="!dep.temp">
                                            <a href="javascript:;" class="btn btn-sm btn-primary" @click="editDep(dep)">编辑</a>
                                            <a href="javascript:;" class="btn btn-sm btn-danger" @click="deleteDep(i)">删除</a>
                                        </template>
                                        <template v-else>
                                            <a href="javascript:;" class="btn btn-sm btn-primary" @click="submitEditDep(dep)">确定</a>
                                            <a href="javascript:;" class="btn btn-sm btn-default" @click="dep.temp = null;">取消</a>
                                        </template>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div id="modal_method_list" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="width: 800px;">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">HSF服务方法列表</h4>
                    </div>
                    <div class="modal-body">
                        <p style="color: #c717b2;">
                            <b>serviceName:</b> {{methodModal.serviceNameAndVersion}}
                        </p>
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th width="25%">方法名</th>
                                    <th width="30%">参数列表</th>
                                    <th width="30%">返回类型</th>
                                    <th width="15%">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-if="!methodList.length">
                                    <td colspan="99">
                                        <div v-if="!methodModal.loading" style="text-align: center">暂无数据</div>
                                        <div v-else style="text-align: center; padding: 20px 0;">
                                            <img src="../../images/loading.gif"/>
                                        </div>
                                    </td>
                                </tr>
                                <tr v-else v-for="(method, i) in methodList">
                                    <td>{{method.name}}</td>
                                    <td class="hide-text">
                                        <span v-for="type in method.parameterTypes" class="label label-default" style="margin-right: 4px;">{{type}}</span>
                                    </td>
                                    <td class="hide-text">{{method.returnType}}</td>
                                    <td>
                                        <a href="javascript:;" class="btn btn-sm btn-primary" @click="methodTest(method.name, method.parameterTypes)">测试</a>
                                        <a href="javascript:;" class="btn btn-sm btn-default" @click="methodYace(method.name, method.parameterTypes)">压测</a>
                                        <a href="javascript:;" class="btn btn-sm btn-default" @click="waiting">查看源码</a>
                                        <a href="javascript:;" class="btn btn-sm btn-default" @click="waiting">一键生成API</a>
                                        <a href="javascript:;" class="btn btn-sm btn-default" @click="waiting">一键Mock</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    

    </div>
    <script src="../../lib/jquery/jquery.min.js"></script>
    <script src="../../lib/bootstrap-3.3.1/js/bootstrap.min.js"></script>
    <script src="../../lib/vue-2.5.17/vue.js"></script>
    <script src="../../lib/clipboard/clipboard.min.js"></script>
    <script src="../../src/view/hsf-manage.js"></script>
</body>

</html>